<template>
  <el-row class="home" :gutter="20">
    <el-col :span="9" style="margin-top: 20px">
      <el-card shadow="hover">
        <div class="user">
          <img src="../../assets/images/LOGN.jpg" alt="user" />
          <div class="user-info">
            <p class="name" style="font-size: 20px;">四川中通云仓科技有限公司</p>
        <div style="display: flex; flex-direction: row;margin-top: 40px; color: red;">
      <div>    <h6 style="font-size: 14px;">四川中通云仓科技有限公司：</h6></div>
         <div>   <p style="font-size: 14px;">12389吨</p></div>
        </div>
          </div>
        </div>
        <div class="login-info">
          <p>企业（高校） <span>四川中通云仓科技有限公司</span></p>
          <p>年度碳排量: <span>7500000吨</span></p>
        </div>
      </el-card>
      <el-card shadow="hover" style="margin-top: 20px;overflow: hidden;" height="450px">
       <div style="height:150px; overflow-y: auto;">
        <el-table :data="tableData">
          <el-table-column v-for="(val, key) in tableLable" :key="key" :prop="key" :label="val"></el-table-column>
        </el-table>
       </div>
      </el-card>

      <!-- 0 -->
      <el-card style="height: 260px;margin-top: 20px;">
          <div ref="lineEchart" style="height: 240px"></div>
        </el-card>
    </el-col>
    <el-col :span="15" style="margin-top: 20px">
      <div class="num">
        <el-card :body-style="{ display: 'flex', padding: 0 }" v-for="item in countData" :key="item.name">
          <el-image class="icons" :src="item.icon" :style="{ background: item.color }"/>
          <div class="details">
            <p class="num">{{ item.value }}</p>
          </div>
        </el-card>
      </div>
      <el-card style="height: 280px">
        <div ref="echart" style="height: 280px"></div>
      </el-card>
      <div class="graph">
        <el-card style="height: 260px">
          <div ref="userEchart" style="height: 240px"></div>
        </el-card>
        <el-card style="height: 260px">
          <div ref="videoEchart" style="height: 240px"></div>
        </el-card>
      </div>
    </el-col>
  </el-row>
</template>

<script setup>
import {
  onMounted,
  ref,
  getCurrentInstance,
  reactive,
} from "vue";
// import axios from "axios";
import * as echarts from "echarts";

// tableData使用let定义，因为后续会对其进行赋值, tableData is defined using let because it will be assigned later
let tableData = ref([]); // 双向绑定，使用ref包裹数组，实现响应式数据, Two-way binding, use ref to wrap the array to achieve responsive data
let countData = ref({});
// 今日购买，本月购买，总购买 Today's purchases, Monthly purchases, Total purchases
const tableLable = {
  name: "平台公告",
};

// proxy是vue3.0提供的一个全局对象，可以通过getCurrentInstance()获取到当前实例，
// 再通过proxy.$api获取到api-fox模拟的接口数据
const { proxy } = getCurrentInstance();
const getTableList = async () => {
  // 使用api-fox模拟请求数据
  //   await axios
  //     .get(
  //       "https://mock.apifox.com/m1/4216854-0-default/api/home/getTableData"
  //     )
  //     .then((res) => {
  //       console.log(res);
  //       if (res.data.code === 200) {
  //         tableData.value = res.data.data;
  //       }
  //     });

  // let res = await proxy.$api.getTableData();
  // tableData.value = res;
  tableData.value = [
        {
          name: "        能源消耗情况通报：根据最新数据显示，本月园区电力消耗较上月有所增加，特别是在高峰时段的用电量较大，请各部门严格控制用电，提高能源利用效率，共同致力于节能减排工作。",
        },
        {
          name: "环境监测数据更新：最新的环境监测数据显示，园区内空气质量良好，但需注意近期天气炎热，空调使用过度可能导致能源浪费，碳排放增加，请合理调整室内温度，减少能源消耗。",
        },
        {
          name: "设备",  
        },
        {
          name: "机器",
        },
        {
          name: "厂房",
        },
        {
          name: "建筑",
        },
        {
          name: "设备",  
        },
        {
          name: "机器",
        },
      ]
};
// 获取首页count统计数据
const getCountData = async () => {
  // let res = await proxy.$api.getCountData();
  // countData.value = res;
  countData.value = [
    {"name":"Today paid order","value":"能耗","icon":"https://img.88icon.com/download/jpg/202008/3013c8853241530f54774e58a267e9f8_512_512.jpg!bg","color":"#2ec7c9"},
    {"name":"Today collection order","value":"建筑","icon":"https://ts1.cn.mm.bing.net/th/id/R-C.0f3c5b78fd41e95a6e6e53856a5c2e48?rik=xnQoq%2b%2fCQKqr7g&riu=http%3a%2f%2fimg02.viwik.com%2f20181017%2fviwik_sy_1206066621749.jpg&ehk=gvfzynSK2oYtCMXFMEfkEM4RY0JY49yWUJI9AazDFnU%3d&risl=&pid=ImgRaw&r=0","color":"#ffb980"},
    {"name":"Today unpaid order","value":"水资源","icon":"https://img.51miz.com/preview/element/00/01/14/94/E-1149479-E1B122AC.jpg","color":"#5ab1ef"},
    {"name":"Monthly paid order","value":"道路交通","icon":"https://bpic.588ku.com/element_origin_min_pic/19/08/13/42f3cb8bc542f20ab2a39b062e25bd39.jpg","color":"#2ec7c9"},
    {"name":"Monthly collection order","value":"可再生资源","icon":"https://ts1.cn.mm.bing.net/th/id/R-C.217127b44b8a8ec54188fa4ad0f3c65d?rik=AF1LCdf2s1LY3g&riu=http%3a%2f%2fwww.kuaipng.com%2fUploads%2fpic%2fw%2f2020%2f06-10%2f84932%2fwater_84932_698_698_.png&ehk=%2b2EZhLdu0kKjnRs6uglGUIGIxkEmQUPscvD%2fhWH1RpQ%3d&risl=&pid=ImgRaw&r=0","color":"#ffb980"},
    {"name":"Monthly unpaid order","value":"个人碳排量","icon":"https://img.tukuppt.com/png_preview/00/47/51/tZu3sx9ROH.jpg!/fw/780","color":"#5ab1ef"}]
};

// 关于echarts的渲染部分，可以参考echarts官网的文档
let xOptions = reactive({
  // 图例文字颜色
  textStyle: {
    color: "#333",
  },
  grid: {
    left: "20%",
  },
  // 提示框
  tooltip: {
    trigger: "axis",
  },
  xAxis: {
    type: "category", // 类目轴
    data: [],
    axisLine: {
      lineStyle: {
        color: "#17b3a3",
      },
    },
    axisLabel: {
      interval: 0,
      color: "#333",
    },
  },
  yAxis: [
    {
      type: "value",
      axisLine: {
        lineStyle: {
          color: "#17b3a3",
        },
      },
    },
  ],
  color: ["#2ec7c9", "#b6a2de", "#5ab1ef", "#ffb980", "#d87a80", "#8d98b3"],
  series: [],
});
let pieOptions = reactive({
  tooltip: {
    trigger: "item",
  },
  color: [
    "#0f78f4",
    "#dd536b",
    "#9462e5",
    "#a6a6a6",
    "#e1bb22",
    "#39c362",
    "#3ed1cf",
  ],
  series: [],
});
// 定义响应式数据 !!
let orderData = reactive({
  xData: [],
  series: [],
  legend:[]
});
let userData = reactive({
  xData: [],
  series: [],
});
let lineData = reactive({
  xData: [],
  yData: [],
  series: [],
});
let videoData = reactive({
  series: [],
});

// 获取echarts数据
const getEchartData = async () => {
  let result = await proxy.$api.getEchartData();
  // console.log(result);
  // let { orderData, userData, videoData } = result; // 解构赋值后不具有响应式，因为result是一个普通对象
  let res = result.orderData;
  let userRes = result.userData;
  let videoRes = result.videoData;
  orderData.xData = res.date;
  const keyArray = Object.keys(res.data[0]);
  const series = [];
  keyArray.forEach((key) => {
    series.push({
      name: key,
      data: res.data.map((item) => item[key]),
      type: "line",
    });
  });
  orderData.series = series;
  xOptions.xAxis.data = orderData.xData;
  xOptions.series = orderData.series;
  // 渲染echarts: orderData
  let hEcharts = echarts.init(proxy.$refs["echart"]); // 获取dom节点 ref="echart"
  hEcharts.setOption(xOptions);

  // 渲染柱状图: userData
  userData.xData = userRes.map((item) => item.date);
  userData.series = [
    {
      name: "New users",
      data: userRes.map((item) => item.new),
      type: "bar",
    },
    {
      name: "Active users",
      data: userRes.map((item) => item.active),
      type: "bar",
    },
  ];
  xOptions.xAxis.data = userData.xData;
  xOptions.series = userData.series;
  let userEcharts = echarts.init(proxy.$refs["userEchart"]); // 获取dom节点 ref="userEchart"
  userEcharts.setOption(xOptions);

  // 渲染饼图: videoData
  videoData.series = [
    {
      data: videoRes,
      type: "pie",
    },
  ];
  pieOptions.series = videoData.series;
  let videoEcharts = echarts.init(proxy.$refs["videoEchart"]); // 获取dom节点 ref="videoEchart"
  videoEcharts.setOption(pieOptions);
};

const getEchartData2 = async () => {
  // 渲染曲线图
  orderData.xData = ["一月", "二月", "三月", "四月", "五月", "六月", "七月","八月","九月","十月","十一月","十二月"];
  const series = [
    {
      name: "能耗",
      data: [54.11, 56.00, 48.21, 50.00, 46.15, 39.78,40.18, 56.21, 43.72, 48.39, 53.30, 41.26,],
      type: "line",
    },
    {
      name: "建筑",
      data: [30.75, 28.3, 25.3, 30.5, 31.25, 29.59,29.41, 29, 30.28, 28.66, 30, 26.83],
      type: "line",
    },
    {
      name: "道路交通",
      data: [18.45, 16.98, 15.18, 18.3, 18.75, 17.75,17.65, 17.4, 18.17, 17.2, 18, 16.1],
      type: "line",
    },
    {
      name: "个人碳减排",
      data: [4.17, 3.76, 3.54, 3.53, 3.28, 2.97,3.61, 3.00, 2.71, 3.57, 4.03, 3.41],
      type: "line",
    },
    {
      name: "水资源",
      data: [6.82, 6.91, 7.78, 7.71, 6.26, 6.69,5.99, 6.53, 7.01, 5.84, 5.51, 5.79],
      type: "line",
    },
    {
      name: "可再生资源利用",
      data: [3.72, 4.00, 4.30, 4.21, 3.81, 5.76,3.60, 4.75, 4.61, 3.68, 3.27, 2.89],
      type: "line",
    },
    
  ];
  orderData.series = series;
  xOptions.xAxis.data = orderData.xData;
  xOptions.series = orderData.series;
   // 渲染echarts: orderData
   let hEcharts = echarts.init(proxy.$refs["echart"]); // 获取曲线图dom节点 ref="echart"
  hEcharts.setOption(xOptions);
  //渲染lineData
  lineData.xData = ['1', '2', '3', '4', '5','6', '7', '8', '9', '10', '11', '12'];
  lineData.yData =[];
  lineData.series =[
    {
      data: [118.02, 115.95, 104.31, 113.71, 109.5,102.54,100.44,116.89,106.5,107.34,114.11,96.28],
      type: 'line',
      areaStyle: {}
    },
    // {
    //   data: [25, 14, 23, 35, 10],
    //   type: 'line',
    //   areaStyle: {
    //     color: '#ff0',
    //     opacity: 0.5
    //   }
    // }
  ]
  xOptions.xAxis.data = lineData.xData;
  xOptions.series = lineData.series;
  let lineEcharts = echarts.init(proxy.$refs["lineEchart"]); // 获取柱状图dom节点 ref="userEchart"
  lineEcharts.setOption(xOptions);
 

  // 渲染柱状图: userData
  userData.xData = ["厂房", "建筑", "设备", "机械", "绿化", "路灯", "监控"];
  userData.series = [
    // {
    //   name: "New users",
    //   data: [5, 10, 20, 30, 40, 60, 80],
    //   type: "bar",
    // },
    {
      name: "Active users",
      data: [180, 160, 170, 130, 150, 100, 180],
      type: "bar",
    },
  ];
  xOptions.xAxis.data = userData.xData;
  xOptions.series = userData.series;
  let userEcharts = echarts.init(proxy.$refs["userEchart"]); // 获取柱状图dom节点 ref="userEchart"
  userEcharts.setOption(xOptions);

  // 渲染饼图: videoData
  pieOptions.series = [
    {
      data: [{
        "name": "能耗",
        "value": 2999
      }, {
        "name": "可再生能源利用",
        "value": 5999
      }, {
        "name": "水资源",
        "value": 1500
      }, {
        "name": "个人碳减排",
        "value": 1999
      }, {
        "name": "道路交通",
        "value": 2200
      }, {
        "name": "建筑",
        "value": 4500
      }],
      type: "pie",
    },
  ];
  let videoEcharts = echarts.init(proxy.$refs["videoEchart"]); // 获取饼状图dom节点 ref="videoEchart"
  videoEcharts.setOption(pieOptions);
};

onMounted(() => {
  getTableList();
  getCountData();
  getEchartData2();
});
</script>

<style lang="less">
.home {
  .user {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;

    img {
      width: 130px;
      height: 130px;
      border-radius: 50%;
      margin-right: 40px;
    }
  }

  .login-info {
    p {
      line-height: 30px;
      font-size: 14px;
      color: #999;

      span {
        color: #666;
        margin-left: 60px;
      }
    }
  }

  .num {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .el-card {
      width: 32%;
      margin-bottom: 20px;
    }

    .icons {
      width: 80px;
      height: 80px;
      font-size: 30px;
      text-align: center;
      line-height: 80px;
      color: #fff;
    }

    .details {
      margin-left: 8px;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .num {
        font-size: 20px;
        margin-bottom: 10px;
      }

      .text {
        font-size: 13px;
        // text-align: center;
        color: #999;
      }
    }
  }

  .graph {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;

    .el-card {
      width: 48%;
    }
  }
}

.el-table .cell {
  padding: 0 3px;
}
</style>
